<template>
  <div class="HomeContent">
    <h2>热门精选</h2>

    <div class="content">
      <div class="content-item" v-for="item in houseList" :key="item.data.houseId">
        <!-- 
        不同类型 显示不同组件
       -->
        <home-item-t-9 v-if="item.discoveryContentType === 9" :itemData="item.data" @click="itemClick(item.data)"></home-item-t-9>
        <home-item-t-3 v-else-if="item.discoveryContentType === 3" :itemData="item.data" @click="itemClick(item.data)"></home-item-t-3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onUnmounted, onMounted } from 'vue'
import { useHomeStore } from '@/stores/home.js'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import HomeItemT9 from '@/views/home/components/HomeItemT9.vue'
import HomeItemT3 from '@/views/home/components/HomeItemT3.vue'

// 1.实例化仓库实例
const homeStore = useHomeStore()
// 2.请求
homeStore.fetchHouseList()
// 3.解构响应式数据
const { houseList } = storeToRefs(homeStore)

// 点击house-item跳转到详情页
const router = useRouter()
function itemClick(data){
  router.push(`/detail/${data.houseId}`)
}
</script>

<style scoped lang="less">
.HomeContent {
  h2 {
    margin: 15px;
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .content-item {
      margin: 6px 0;
    }
  }
}
</style>
